<template>
    <div class="probject">
        <div class="pictureheader bg_style border_style ">
            <YsDatePicker type="daterange" class=" pickerborder" :class="curTheme" placeholder="请选择统计周期"
                @on-change="handleChange" transfer placement="bottom-start"></YsDatePicker>
            <Select style="width: 268px;;margin-right:10px" placeholder="请搜索选择项目" class="select-border"
                v-model="params.project_id">
                <Option v-for="(item, index) in projectInfos" @click.native="getProjectVal(item)" :value="item.id"
                    :key="index">{{ item.pd_name }}</Option>
            </Select>
            <YsButton type="primary" @click="getListAll" class="searchBtn">查询</YsButton>
        </div>
        <div class="container" v-if="tableFalg">
            <div class="con-left bg_style border_style">
                <div class="scatter split_line">
                    <label class="car_title text_01">焊口检测结果</label>
                    <YsRow class="rowgao">
                        <YsCol span="14">
                            <div class="box-draw" id="pie2"></div>
                        </YsCol>
                        <YsCol span="10">
                            <ul class="legend" style="margin-top:44px">
                                <li>
                                    <div class="circular" style="background:#13B38F"></div> <label
                                        class="text_01">合格</label>
                                    <span class="text_01">0</span>
                                </li>
                                <li>
                                    <div class="circular" style="background:#D53939"></div> <label
                                        class="text_01">不合格</label>
                                    <span class="text_01">0</span>
                                </li>
                            </ul>
                        </YsCol>
                    </YsRow>
                </div>
                <div class="scatter split_line">
                    <label class="car_title text_01">底片等级分布</label>
                    <YsRow class="rowgao">
                        <YsCol span="14">
                            <div class="box-draw" id="pie"></div>
                        </YsCol>
                        <YsCol span="10">
                            <ul class="legend leTow">
                                <li v-for="(item, index) in dataPieArr" :key="index">
                                    <div class="circular" :style="{ 'background': item.bg }"></div> <label
                                        class="text_01">{{ item.name }}</label>
                                    <span class="text_01">{{ item.value }}</span>
                                </li>
                            </ul>
                        </YsCol>
                    </YsRow>
                </div>
                <div class="scatter sfooter split_line">
                    <label class="car_title text_01">缺陷类型结果分布</label>
                    <div class="box-draw box-bar" id="bar"></div>
                </div>
                <div class="scatter tfooter split_line">
                    <label class="car_title text_01">检测信息</label>
                    <ul class="listInfo">
                        <li class="list-item list-header split_line">
                            <span>时间</span>
                            <span>底片数量</span>
                        </li>
                        <li class="list-item split_line" v-for="(item, index) in detectionData" :key="index">
                            <span class="text_01">{{ item.date_time }}</span>
                            <span class="list-w54 text_01">{{ item.file_num }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="con-main ">
                <probjectTabs ref="probjectDom" @createTasks="getTableListInfo" :deviceNoNum="device_no_num">
                </probjectTabs>
                <div class="con-table  bg_style border_style">
                    <YsTable class="table-3" :class="curTheme + '-table'" :columns="tableColumn" no-data-text=""
                        :border="true" width="100%" :data="tableData">
                        <template slot="result-1" slot-scope="{ row }">
                            <!-- <YsButton v-if="row._index != 0" class="res-btn res-btn-green">合格</YsButton>
                            <YsButton v-else class="res-btn res-btn-red">不合格</YsButton> -->
                            <span>--</span>
                        </template>
                    </YsTable>
                </div>
            </div>
        </div>
        <div :class="curTheme" class="anouter2 border_style" v-if="!tableFalg">
            <div class="default-box">
                <img class="default-img" src="../../assets/images/default2.png" alt="">
                <p> 暂无数据</p>
            </div>
        </div>
    </div>
</template>
<script>
import { set } from 'vue';
import { mapGetters, mapState, mapActions } from "vuex";
import dashboard from "./components/dashboard.vue";
import probjectTabs from "./components/probjectTabs.vue";
import setTime from '../../utils/setTime';
export default {
    name: 'projectAnalysis',
    components: {
        dashboard,
        probjectTabs
    },
    data() {
        return {
            dataPieArr: [],
            params: {
                ent_no: "",
                end_time: "",
                start_time: "",
                project_id: "",
            },
            projectInfos: [],
            tableData: [],
            tableColumn: [
                {
                    title: '焊口(焊缝编号)',
                    key: 'key',
                    align: 'center',
                    tooltip: true
                },
                {
                    title: '底片数量',
                    key: 'file_num',
                    align: 'center',
                    tooltip: true,
                    render: (h, params) => {
                        return h("span", {
                            class: 'text-blue',
                            on: {
                                click: (event) => {
                                    //跳转到底片页面
                                    this.goToFileDetails(params.row)
                                },
                            }
                        }, params.row.file_num ? params.row.file_num : '--')
                    }
                },

                {
                    title: 'I级',
                    key: 'attr_1',
                    align: 'center',
                    tooltip: true,
                    render: (h, params) => {
                        return h("span", {}, params.row.attr_1 ? params.row.attr_1 : '--')
                    }
                },
                {
                    title: 'II级',
                    key: 'attr_2',
                    align: 'center',
                    tooltip: true,
                    render: (h, params) => {
                        return h("span", {}, params.row.attr_2 ? params.row.attr_2 : '--')
                    }

                },
                {
                    title: 'III级',
                    key: 'attr_3',
                    align: 'center',
                    tooltip: true,
                    render: (h, params) => {
                        return h("span", {}, params.row.attr_3 ? params.row.attr_3 : '--')
                    }
                },

                {
                    title: 'IV级',
                    key: 'attr_4',
                    align: 'center',
                    tooltip: true,
                    render: (h, params) => {
                        return h("span", {}, params.row.attr_4 ? params.row.attr_4 : '--')
                    }
                },

                {
                    title: '焊口等级',
                    key: 'job_code',
                    align: 'center',
                    tooltip: true,
                    render: (h, params) => {
                        return h("span", {}, params.row.job_code ? params.row.job_code : '--')
                    }
                },

                {
                    title: '结果',
                    key: '',
                    tooltip: true,
                    align: 'center',
                    slot: 'result-1'
                },

            ],
            detectionData: [],
            device_no_num: 0,
            weld_no_num: 0,
            file_num: 0,
            tableFalg: false
        }
    },
    computed: {
        ...mapState(['curTheme']),
        ...mapGetters(["getCommData"]),
    },
    mounted() {
        let { ent_no } = this.getCommData;
        this.params.ent_no = ent_no
        this.getObjectList()
    },
    methods: {
        ...mapActions(["getPageQueryProjectAPI", "getProjectAnalysisAPI", "getDeviceToWeldAnalysisAPI"]),
        //获取表格数据
        getTableListInfo(item) {
            let c_params = {
                start_time: this.params.start_time,
                end_time: this.params.end_time,
                device_no: item.key||"",
                project_id:this.params.project_id
            }

            this.tableData = []
            this.getDeviceToWeldAnalysisAPI(c_params).then(res => {
                let { data, msg, scode, status } = res;
                if (status === 'ok') {
                    for (let i = 0; i < data.weldFileData.length; i++) {
                        let item = data.weldFileData[i];
                        if (item.val) {
                            for (let j = 0; j < item.val.length; j++) {
                                let its = item.val[j];
                                if (its.key === 'file_num') {
                                    item.file_num = its.val
                                }
                                if (its.key) {
                                    item[`attr_${its.key}`] = its.val
                                }
                            }
                        }
                    }
                    this.tableData = data.weldFileData
                }
            }).catch(err => {
                this.$YsMessage.error('获取数据失败');
            })
        },

        //查询数据
        getListAll() {
            this.tableFalg = false
            this.getProbjectList()
        },
        //获取项目列表
        getProbjectList() {
            this.detectionData = this.$options.data().detectionData
            this.device_no_num = this.$options.data().device_no_num
            this.weld_no_num = this.$options.data().weld_no_num
            this.file_num = this.$options.data().file_num
            this.tableData = []
            this.getProjectAnalysisAPI(this.params).then(res => {
                let { data, msg, scode, status } = res;
                this.tableFalg = true
                this.device_no_num = data.appdata.projectDownLevelNum ? data.appdata.projectDownLevelNum.device_no_num : 0//设备数量
                this.weld_no_num = data.appdata.projectDownLevelNum ? data.appdata.projectDownLevelNum.weld_no_num : 0//焊接数量
                this.file_num = data.appdata.projectDownLevelNum ? data.appdata.projectDownLevelNum.file_num : 0//底片数
                this.detectionData = data.appdata.projectDownLevelNum ? data.appdata.projectDownLevelNum.job_count_num : []//列表
                this.drawPieEchart('pie', data.appdata.fileLevelDist ? data.appdata.fileLevelDist : [])
                this.qualifiedPieEchart('pie2', data.appdata.fileLevelDist ? data.appdata.fileLevelDist : [])
                this.drawBarEchart('bar', data.appdata.flawTypeDist ? data.appdata.flawTypeDist : [])
                setTimeout(() => {
                    this.$refs.probjectDom.getDeviceList(this.params)
                }, 500)
            }).catch(err => {
                this.$YsMessage.error('获取数据失败');
            })
        },
        //获取项目列表
        getObjectList() {
            let _this = this
            _this.getPageQueryProjectAPI({ limit_recd: 99999 }).then(res => {
                let { data, msg, scode, status } = res;
                if (status === 'ok') {
                    this.projectInfos = data.projectInfos
                } else {
                    _this.$YsMessage.error(msg);
                }
            }).catch(err => {
                _this.$YsMessage.error('获取数据失败');
            })
        },
        //获取时间
        handleChange(time) {
            this.params.start_time = `${time[0]} 00:00:00`;
            this.params.end_time = `${time[1]} 23:59:59`;
        },
        //底片等级分布
        drawPieEchart(idDom, data) {
            this.$nextTick(() => {
                this.dataPieArr = [
                    { value: 0, name: 'I级', id: 1, bg: '#D53939' },
                    { value: 0, name: 'II级', id: 2, bg: '#E77930' },
                    { value: 0, name: 'III级', id: 3, bg: '#0091FF' },
                    { value: 0, name: 'IV级', id: 4, bg: '#13B38F' },
                ]

                this.dataPieArr.map(v => {
                    data.map(t => {
                        if (v.id == t.key) {
                            v.value = t.val
                        }
                    })
                })
                let echarts_pre = this.$echarts.init(document.getElementById(idDom))
                let option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        show: false,
                        orient: 'horizontal',
                        left: 'center',
                        bottom: '10px',
                        icon: "circle",
                        textStyle: {
                            color: this.curTheme == "theme-blue" ? "#cfd7e5" : 'rgba(64, 86, 128, 1)',
                        }
                    },
                    color: ['#D53939', '#E77930', '#0091FF', '#13B38F'],
                    title: {
                        show: true,
                        subtext: '总数',
                        itemGap: 8,
                        left: '40%',
                        top: '54%',
                        subtextStyle: {
                            color: '#405680',
                        },
                    },
                    series: [
                        {
                            name: '',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                },
                            },
                            type: 'pie',
                            radius: ['73%', '86%'],
                            center: ['50%', '50%'],
                            data: this.dataPieArr,
                        },
                        {
                            type: 'pie',
                            radius: ['0', '58%'],
                            center: ['50%', '50%'],
                            hoverAnimation: false,
                            label: {
                                normal: {
                                    position: 'center'
                                },
                            },
                            data: [
                                {
                                    value: this.file_num,
                                    name: '占位',
                                    tooltip: {
                                        show: false
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#F5F7FA',
                                        }
                                    },
                                    label: {
                                        normal: {
                                            formatter: `${this.file_num}`,
                                            textStyle: {
                                                fontSize: 22,
                                                color: '#405680',
                                            }
                                        },

                                    }
                                },

                            ]
                        },

                    ]
                };
                echarts_pre.setOption(option)
                window.addEventListener("resize", () => {
                    echarts_pre.resize();
                });
            })
        },
        //合格率
        qualifiedPieEchart(idDom) {
            this.$nextTick(() => {
                let dataArr = [
                    { value: 95, name: '合格' },
                    { value: 5, name: '不合格' },
                ]
                let echarts_pre = this.$echarts.init(document.getElementById(idDom))
                let option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    title: {
                        show: true,
                        subtext: '总数',
                        itemGap: 8,
                        left: '40%',
                        top: '54%',
                        subtextStyle: {
                            color: '#405680',

                        },
                    },
                    legend: {
                        show: false,
                        orient: 'horizontal',
                        left: 'center',
                        bottom: '10px',
                        icon: "circle",
                        textStyle: {
                            color: this.curTheme == "theme-blue" ? "#cfd7e5" : 'rgba(64, 86, 128, 1)',
                        }
                    },
                    color: ['#13B38F', '#D53939'],
                    series: [
                        {
                            name: '',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                },
                            },

                            type: 'pie',
                            radius: ['73%', '86%'],
                            center: ['50%', '50%'],
                            data: dataArr,
                        },
                        {
                            type: 'pie',
                            radius: ['0', '58%'],
                            center: ['50%', '50%'],
                            hoverAnimation: false,
                            label: {
                                normal: {
                                    position: 'center'
                                },
                            },
                            data: [
                                {
                                    value: 0,
                                    name: '0',
                                    tooltip: {
                                        show: false
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#F5F7FA',
                                        }
                                    },
                                    label: {
                                        normal: {
                                            formatter: 0,
                                            textStyle: {
                                                fontSize: 22,
                                                color: '#405680',
                                            }
                                        },
                                    }
                                },

                            ]
                        },
                    ]
                };
                echarts_pre.setOption(option)
                window.addEventListener("resize", () => {
                    echarts_pre.resize();
                });
            })
        },
        //柱状图
        drawBarEchart(id, dataValue) {
            this.$nextTick(() => {
                let draw = this.$echarts.init(document.getElementById(id))
                let option = {
                    color: ['#D53939', '#E77930', '#13B38F', '#0091FF'],
                    title: {
                        top: 18,
                        left: 8,
                        text: '张',
                        textStyle: {
                            fontSize: 14,
                            color: this.curTheme == "theme-blue" ? "#cfd7e5" : 'rgba(64, 86, 128, 1)',
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {

                        data: ['I级', 'II级', 'III级', 'IV级'],
                        orient: 'horizontal',
                        left: 'right',
                        icon: "circle",
                        top: '20px',
                        textStyle: {
                            color: this.curTheme == "theme-blue" ? "#cfd7e5" : 'rgba(64, 86, 128, 1)',
                        }
                    },
                    xAxis: {
                        data: ['圆形缺陷', '条形', '未焊透', '裂纹', '未熔合'],
                        axisLine: { show: false, },
                        axisTick: { show: false, },
                        splitLine: { show: false },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                fontSize: 14,
                                color: this.curTheme == "theme-blue" ? "#cfd7e5" : "rgba(64, 86, 128, 1)",
                            },
                        },
                        splitArea: { show: false }
                    },
                    yAxis: {
                        axisTick: { show: false, },
                        splitLine: {
                            show: true, lineStyle: {
                                color: "rgba(225, 230, 240, 1)",
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize: 14,
                                color: this.curTheme == "theme-blue" ? "#cfd7e5" : "rgba(64, 86, 128, 1)",
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(225, 230, 240, 1)",
                            },
                        },
                        splitArea: { show: false }
                    },
                    grid: {
                        bottom: 20
                    },
                    series:
                        [
                            {
                                name: 'I级',
                                type: 'bar',
                                stack: 'one',
                                data: [0, 0, 0, 0, 0],
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: [4, 4, 0, 0],
                                    }
                                },
                            },
                            {
                                name: 'II级',
                                type: 'bar',
                                stack: 'one',
                                data: [0, 0, 0, 0, 0],
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: [4, 4, 0, 0],
                                    }
                                },
                            },
                            {
                                name: 'III级',
                                type: 'bar',
                                stack: 'one',
                                data: [0, 0, 0, 0, 0],
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: [4, 4, 0, 0],
                                    }
                                },
                            },
                            {
                                name: 'IV级',
                                type: 'bar',
                                stack: 'one',
                                data: [0, 0, 0, 0, 0],
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: [4, 4, 0, 0],
                                    }
                                },
                            },
                        ]
                };
                if (option.xAxis.data) {
                    for (let i = 0; i < option.xAxis.data.length; i++) {
                        let xitem = option.xAxis.data[i];
                        for (let j = 0; j < dataValue.length; j++) {
                            let ditem = dataValue[j];
                            if (xitem == ditem.key) {
                                ditem.val.map(v => {
                                    option.series[Number(v.key) - 1].data[i] = v.val
                                })
                            } else {
                            }
                        }
                    }
                }

                draw.setOption(option)
                window.addEventListener("resize", () => {
                    draw.resize();
                });
            })


        },
        //条件详情
        goToFileDetails(row) {
            this.$router.push({
                name: "photoQuery",
                query: { weld_no: row.key }
            });
        },
        //获取参数
        getProjectVal(val) {

        }
    },

}
</script>
  
<style scoped lang='less'>
.probject {
    height: 100%;

    .pictureheader {
        width: 100%;
        border: 1px solid #cfd7e5;
        display: flex;
        align-items: center;
        border-radius: 4px;
        margin-bottom: 8px;
        height: 72px;
        padding: 0 16px;
        overflow: hidden;

        .open-btn {
            margin-left: auto;
        }

        .analysis-add {
            width: 40px;
            height: 40px;

            line-height: 40px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #ccc;
            margin: 0 10px;

            &:hover {
                opacity: 0.8;
            }

            i {
                font-size: 18px;
            }
        }
    }

    .container {
        height: calc(100% - 100px);
        display: flex;

        .con-left {
            border-radius: 4px;
            width: 368px;
            border: 1px solid #fff;
            overflow: auto;

            .scatter {
                height: 190px;
                padding: 14px 16px;
                border-bottom: 1px solid #ccc;

                .rowgao {
                    height: calc(100% - 20px) !important;

                    /deep/.ivu-col {
                        height: 100%;
                    }
                }

                label {
                    font-size: 14px;
                    font-weight: 600;
                }

                .box-draw {
                    height: 100%;

                }

                .box-bar {
                    height: calc(100% - 20px);
                }
            }

            .sfooter {
                height: 287px;
            }

            .tfooter {
                height: auto;
                padding: 0;

                .car_title {
                    line-height: 48px;
                    line-height: 48px;
                    padding: 0 16px;
                }

            }

            .listInfo {
                .list-header {
                    background: #F5F7FA;
                    font-size: 14px;
                    font-weight: 600;
                }

                .list-item {
                    width: 100%;
                    height: 48px;
                    line-height: 48px;
                    padding: 0 15px;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #ccc;

                    .list-w54 {
                        width: 54px;
                    }
                }
            }
        }


        .con-main {
            border-radius: 4px;
            margin-left: 9px;
            flex: 1;
            overflow: hidden;

            .res-btn {
                min-width: 64px;
                width: 64px;
                height: 26px;
                padding: 0;
                color: #fff !important;
                border-radius: 4px 4px 4px 4px;
            }

            .res-btn-green {
                background: #13B38F;
                border-color: #13B38F;
            }

            .res-btn-red {
                background: #D53939;
                border-color: #D53939;
            }

            .con-table {
                border: 1px solid #fff;
                margin-top: 9px;
                border-radius: 4px 4px 4px 4px;
                overflow: hidden;
                height: calc(100% - 186px) !important;
            }

        }
    }

    .legend {
        margin-top: 30px;

        li {
            display: flex;
            align-items: center;
            margin-top: 10px;

            .circular {
                width: 10px;
                height: 10px;
                border-radius: 5px 5px 5px 5px;
                opacity: 1;
            }

            label {
                width: 50px;
                margin: 0 8px;
                font-weight: inherit !important;
            }
        }
    }

    .leTow {
        margin-top: 10px;
    }

    .pickerborder {
        width: 349px;
        margin-right: 11px;
    }

    /deep/ .ivu-table-wrapper {
        box-shadow: none;
        border-radius: 0 0 4px 4px;

        th {
            border-right-color: #e1e6f0 !important;
        }

        td {
            border-right-color: #e1e6f0 !important;
        }
    }
}

/deep/.text-blue {
    color: #0091FF !important;
    cursor: pointer;

}

.table-3 {
    border-top: none;
    border-right: none;
    border-left: none;
}

.anouter2 {
    height: calc(100% - 100px);
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    position: relative;

    .default-box {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -125px 0 0 -130px;

        p {
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            color: #333333;
        }

        .default-img {
            width: 250px;
            height: 260px;
        }
    }
}
</style>